<template>
  <div>
    <div style="text-align: right">
      <el-button type="primary" @click="add">添加</el-button>
    </div>

    <!--  客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="行号" width="80" header-align="center" align="center"></el-table-column>
      <el-table-column prop="company" label="客户公司名称" width="180"/>
      <el-table-column prop="contactName" label="联系人" width="180"/>
      <el-table-column prop="mobile" label="联系方式" width="120"/>
      <el-table-column prop="market" label="市场" width="120"/>
      <el-table-column prop="customer_type" label="客户类型" width="120"/>
      <el-table-column prop="customer_email" label="邮箱" width="120"/>
      <el-table-column prop="createdTime" label="创建时间" width="120"/>
      <el-table-column prop="saleId" label="所属销售" width="120"/>
      <el-table-column prop="source" label="来源" width="120"/>
      <el-table-column label="操作" width="180" align="center">
        <el-button type="primary" :icon="Edit" circle title="修改"/>
        <el-button type="primary">下单记录</el-button>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      background
      :page-sizes="[1, 10 ,20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next,jumper"
      :total="total"
      @size-change="chgsize"
      @current-change="chgpg"/>
  </div>


</template>
<!--  vue 组件选项定义-->
<script setup>

import {ref, onMounted} from 'vue'
//引入api
import {queryCustomer} from '@/api/customer.js'
//引入图标
import {Delete, Edit} from "@element-plus/icons-vue"
//引入路由
import {useRouter}  from "vue-router";
//添加客户
function add(){
  router.push("/customer/add")
}

//表格数据
const tableData = ref([{
  company: '北京小米 科技有限公司',
  contactName: '张三',
  mobile: '13812345678',
  market: '北京',
  customer_type: '企业',
  customer_email: '123@123.com',
  createdTime: '2021-01-01',
  saleId: '李四',
  source: '线下拜访'
}])
//路由实例
const router = useRouter();

//

//分页信息
const page = ref(1) //当前页
const pageSize = ref(1) //每页显示条数
const total = ref(0) //总条数

//每页记录数变化
function chgsize(size) {
  pageSize.value = size;
  initData();
}
//页面发生变化
function chgpg(pg) {
  page.value = pg;
  initData();
}

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
  }
  let res = await queryCustomer({data});
  console.log("res.>", res);
  if (res.code === 200) {
    //设置数据
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }


}

//生命周期
onMounted(() => {
  initData();
})


</script>

<style scoped>

</style>
